<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="../easyui/jquery.min.js"></script>
    <script src="../easyui/jquery.easyui.min.js"></script>
    <script src="../easyui/locale/easyui-lang-zh_CN.js"></script>
    <link rel="stylesheet" href="../easyui/themes/default/easyui.css">
    <link rel="stylesheet" href="../easyui/themes/icon.css">
    <style>
        .textbox {
            height:22px;
            padding:0 2px;
        }
        body{
            margin: 0;
            padding: 0;
        }
    </style>
<script>
    $(function(){
        $("#datagrid").datagrid({
            url:"datagrid.json",
            columns:[[
                {
                    field:"id",
                    title:"标识符",
                    checkbox:true
                },{
                    field:"name",
                    title:"部门名称"
                }
            ]],
            idField:"id",
            toolbar:"#datagrid-toolbar"
        });
        $("#dlg").dialog({
            title:'编辑',
            closed:'true',
            buttons:[
                {
                    text:'确定',
                    iconCls:'icon-ok',
                    handler:function(){
                        var index = $("#datagrid").datagrid("getRowIndex",$("#id").val());
                        if(index!==null){
                            console.log(index);
                            var row = {
                                id:$("#id").val(),
                                username:$("#username").val(),
                                email:$("#email").val()
                            };
                            $("#datagrid").datagrid("updateRow",{
                                index:index,
                                row:row
                            });
                        }
                        $("#dlg").dialog("close");
                    }
                },
                {
                    text:'取消',
                    iconCls:'icon-cancel',
                    handler:function(){
                        $("#dlg").dialog("close");
                    }
                }
            ]
        })
    })
    var op={
        edit:function(){
            var selected = $("#datagrid").datagrid("getSelected");
            if(selected!==null){
                $("#id").val(selected.id);
                $("#id").attr("disabled","true");
                $("#name").val(selected.name);
                $("#dlg").dialog("open");
            }
        },
        add:function(){

        }
    }
</script>
</head>
<body>
<table id="datagrid"></table>
<div id="datagrid-toolbar">
    <a class="easyui-linkbutton" iconCls="icon-add" onclick="op.add();">添加</a>
    <a class="easyui-linkbutton" iconCls="icon-remove">删除</a>
    <a class="easyui-linkbutton" iconCls="icon-edit" onclick="op.edit();">修改</a>
</div>
    <div id="dlg">
        <p>
            <label for="id">标识符</label>
            <input name="id" type="text" id="id" class="textbox">
        </p>
        <p>
            <label for="name">用户名</label>
            <input name="name" type="text" id="name" class="textbox">
        </p>
    </div>
</body>
</html>

